<template>
    <div id="index" ref="appRef">
        <div class="bg">
            <dv-loading v-if="loading">Loading...</dv-loading>
            <div v-else class="host-body">
                <div class="d-flex jc-center">
                    <dv-decoration-10 class="dv-dec-10" />
                    <div class="d-flex jc-center">
                        <dv-decoration-8 class="dv-dec-8" :color="decorationColors" />
                        <div class="title">
                            <span class="title-text">{{ title }}</span>

                        </div>
                        <dv-decoration-8 class="dv-dec-8" :reverse="true" :color="decorationColors" />
                    </div>
                    <dv-decoration-10 class="dv-dec-10-s" />
                </div>

                <!-- 第二行 -->
                <div class="d-flex jc-between px-2">
                    <div class="d-flex aside-width">
                        <div class="react-right bg-color-blue mr-3" @click="shou">
                            <span class="text fw-b">数据监控</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao">
                            <span class="text fw-b">政务办理</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao2">
                            <span class="text fw-b">事项办理</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao3">
                            <span class="text fw-b">诉求治理</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao4">
                            <span class="text fw-b">调节分析</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao5">
                            <span class="text fw-b">新媒体监管</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao6">
                            <span class="text fw-b">新媒体监管11</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao7">
                            <span class="text fw-b">服务大厅</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao8">
                            <span class="text fw-b">服务办件</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao9">
                            <span class="text fw-b">交易政务</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao10">
                            <span class="text fw-b">服务办理</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao11">
                            <span class="text fw-b">督查考核</span>
                        </div>
                    </div>
                </div>

                <div class="body-box">

                    <!-- <router-view></router-view> -->
                    <!-- 第三行数据 -->
                    <div class="content-box">
                        <div class="left">
                            <div class="left-1">
                                <dv-border-box-12 style="height: 120px; width: 500px;">
                                    <div style="padding: 15px 20px;">概况</div>

                                    <div class="flex">
                                        <dv-border-box-10>
                                            <div style="margin: 6%;"> <span style="font-size: 20px;">35</span> 件</div>
                                            <div style="font-size: 14px; margin-top: 15px;">今日受理</div>
                                        </dv-border-box-10>

                                        <dv-border-box-10>
                                            <div style="margin: 6%;"> <span style="font-size: 20px;">200</span> 件</div>
                                            <div style="font-size: 14px; margin-top: 15px;">本月受理</div>
                                        </dv-border-box-10>


                                        <dv-border-box-10>
                                            <div style="margin: 6%;">
                                                <span style="font-size: 20px;">702</span> %
                                            </div>
                                            <div style="font-size: 14px; margin-top: 15px;">今日办结率</div>
                                        </dv-border-box-10>
                                    </div>

                                </dv-border-box-12>
                            </div>

                            <div class="left-2">
                                <dv-border-box-12 style="height: 240px; width: 500px;">
                                    <div class="title2">
                                        <span>祈求分析</span>
                                        <dv-border-box-10>
                                            <div style="margin: 9%;">
                                                <span>全国诉求量 </span>
                                                <span style="font-size: 20px;">552322</span> 件
                                            </div>
                                        </dv-border-box-10>
                                    </div>

                                    <div class="tu-flex">

                                        <div class="single-chart">
                                            <div id="biao1" class="tu1"></div>

                                        </div>

                                        <div class="single-chart">
                                            <div id="biao2" class="tu2"></div>
                                        </div>



                                    </div>

                                </dv-border-box-12>
                            </div>


                            <div class="left-3">
                                <dv-border-box-12 style="height: 210px; width: 500px;">
                                    <div class="chart-title">年度诉求热点部门排名</div>
                                    <div id="biao3" class="biao3"></div>
                                </dv-border-box-12>
                            </div>


                            <div class="left-4">
                                <dv-border-box-12 style="height: 200px; width: 500px;">
                                    <div class="title4">
                                        <div class="left-title">
                                            年度诉求热点部门排名
                                        </div>

                                        <div class="right-tab">
                                            <div v-for="(tab, index) in tabOptions" :key="index"
                                                :class="{ 'active-tab': activeTab === index }"
                                                @click="handleTabClick(index)">
                                                {{ tab }}
                                            </div>
                                        </div>

                                    </div>
                                    <div id="biao4" class="biao4"></div>
                                </dv-border-box-12>
                            </div>


                            <div class="left-5">
                                <dv-border-box-12
                                    style="height: 180px; width: 500px; background-color: #091e3e; padding: 10px;">
                                    <div class="title5">
                                        <div class="left-title">年度投诉热点部门排名</div>
                                        <div class="right-tab2">
                                            <div v-for="(tab, index) in tabOptions" :key="index"
                                                :class="{ 'active-tab': activeTab2 === index }"
                                                @click="handleTabClick2(index)">
                                                {{ tab }}
                                            </div>
                                        </div>
                                    </div>

                                    <div class="dept-grid"
                                        style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 15px; padding: 0 5px;">
                                        <div class="dept-item"
                                            style="background-color: #1e88e5; padding: 3px 2px; text-align: center; font-size: 11px; color: white; width: calc(100% - 4px); margin: 0 auto;">
                                            <span>A区</span>
                                            <span> 1h</span>
                                        </div>
                                        <div class="dept-item"
                                            style="background-color: #1e88e5; padding: 3px 2px; text-align: center; font-size: 11px; color: white; width: calc(100% - 4px); margin: 0 auto;">
                                            <span>B区</span>
                                            <span> 1.5h</span>
                                        </div>
                                        <div class="dept-item"
                                            style="background-color: #1e88e5; padding: 3px 2px; text-align: center; font-size: 11px; color: white; width: calc(100% - 4px); margin: 0 auto;">
                                            <span>C区</span>
                                            <span> 2h</span>
                                        </div>
                                        <div class="dept-item"
                                            style="background-color: #1e88e5; padding: 3px 2px; text-align: center; font-size: 11px; color: white; width: calc(100% - 4px); margin: 0 auto;">
                                            <span>D区</span>
                                            <span> 3h</span>
                                        </div>
                                        <div class="dept-item"
                                            style="background-color: #1e88e5; padding: 3px 2px; text-align: center; font-size: 11px; color: white; width: calc(100% - 4px); margin: 0 auto;">
                                            <span>F区</span>
                                            <span> 3.1h</span>
                                        </div>
                                        <div class="dept-item"
                                            style="background-color: #1e88e5; padding: 3px 2px; text-align: center; font-size: 11px; color: white; width: calc(100% - 4px); margin: 0 auto;">
                                            <span>G区</span>
                                            <span> 3.5h</span>
                                        </div>
                                        <div class="dept-item"
                                            style="background-color: #1e88e5; padding: 3px 2px; text-align: center; font-size: 11px; color: white; width: calc(100% - 4px); margin: 0 auto;">
                                            <span>H区</span>
                                            <span> 4h</span>
                                        </div>
                                        <div class="dept-item"
                                            style="background-color: #1e88e5; padding: 3px 2px; text-align: center; font-size: 11px; color: white; width: calc(100% - 4px); margin: 0 auto;">
                                            <span>I区</span>
                                            <span> 4.3h</span>
                                        </div>
                                        <div class="dept-item"
                                            style="background-color: transparent; border: 1px solid #1e88e5; padding: 3px 2px; text-align: center; font-size: 11px; color: white; width: calc(100% - 4px); margin: 0 auto;">
                                            <span>J区</span>
                                            <span> 6.1h</span>
                                        </div>
                                        <div class="dept-item"
                                            style="background-color: transparent; border: 1px solid #1e88e5; padding: 3px 2px; text-align: center; font-size: 11px; color: white; width: calc(100% - 4px); margin: 0 auto;">
                                            <span>K区</span>
                                            <span> 7.5h</span>
                                        </div>
                                        <div class="dept-item"
                                            style="background-color: transparent; border: 1px solid #1e88e5; padding: 3px 2px; text-align: center; font-size: 11px; color: white; width: calc(100% - 4px); margin: 0 auto;">
                                            <span>L区</span>
                                            <span> 8h</span>
                                        </div>
                                        <div class="dept-item"
                                            style="background-color: transparent; border: 1px solid #1e88e5; padding: 3px 2px; text-align: center; font-size: 11px; color: white; width: calc(100% - 4px); margin: 0 auto;">
                                            <span>M区</span>
                                            <span> 10h</span>
                                        </div>
                                    </div>
                                </dv-border-box-12>
                            </div>

                        </div>



                        <div class="center">

                            <div class="top">
                                <div class="center-1">
                                <dv-flyline-chart-enhanced :dev="true" :config="config"
                                    style="display: block;margin: 0 auto;width:800px;height:480px;" />
                            </div>

                            </div>

                            <div class="bottom">
                                <dv-border-box-12 style="height: 440px;">
                                    <div class="table-container" style="padding: 5px;">
                                        <div class="table-title"
                                            style="font-size: 18px; font-weight: bold; margin-bottom: 5px; color: #ffffff; text-align: center;">
                                            热点诉求排名
                                        </div>
                                        <div class="table-wrapper"
                                            style="background: #193053; border-radius: 6px; overflow: hidden;">
                                            <table class="hot-demand-table"
                                                style="width: 100%; border-collapse: collapse; color: #ffffff; font-size: 14px; border: none;">
                                                <tbody>
                                                    <tr>
                                                        <td
                                                            style="padding: 12px 8px; text-align: center; background: #073576; color: white; border: none;">
                                                            <div>1</div>
                                                            <div style="font-size: 12px;">Top</div>
                                                        </td>
                                                        <td
                                                            style="padding: 12px 8px; text-align: center; border: none; position: relative;">
                                                            <div style="color: #81d3f8; font-size: 13px;">城市综合</div>
                                                            <div style="color: white; font-size: 12px;">213241 件</div>
                                                            <span
                                                                style="position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: white;">→</span>
                                                        </td>
                                                        <td
                                                            style="padding: 12px 8px; text-align: center; border: none; position: relative;">
                                                            <div style="color: white; font-size: 13px;">TOP1</div>
                                                            <div style="color: white; font-size: 12px;">噪音污染</div>
                                                            <div style="color: white; font-size: 11px;">诉求量:23456</div>
                                                            <span
                                                                style="position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: white;">→</span>
                                                        </td>
                                                        <td
                                                            style="padding: 12px 8px; text-align: center; border: none; position: relative;">
                                                            <div style="color: white; font-size: 13px;">TOP2</div>
                                                            <div style="color: white; font-size: 12px;">类型B</div>
                                                            <div style="color: white; font-size: 11px;">诉求量:23456</div>
                                                            <span
                                                                style="position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: white;">→</span>
                                                        </td>
                                                        <td
                                                            style="padding: 12px 8px; text-align: center; border: none; position: relative;">
                                                            <div style="color: white; font-size: 13px;">TOP3</div>
                                                            <div style="color: white; font-size: 12px;">空气污染</div>
                                                            <div style="color: white; font-size: 11px;">诉求量:23456</div>
                                                            <span
                                                                style="position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: white;">→</span>
                                                        </td>
                                                        <td
                                                            style="padding: 12px 8px; text-align: center; border: none;">
                                                            <div style="color: white; font-size: 13px;">TOP4</div>
                                                            <div style="color: white; font-size: 12px;">河道污染</div>
                                                            <div style="color: white; font-size: 11px;">诉求量:23456</div>
                                                        </td>
                                                    </tr>
                                                    <tr style="background: rgba(255, 255, 255, 0.05);">
                                                        <td
                                                            style="padding: 12px 8px; text-align: center; background: #073576; color: white; border: none;">
                                                            <div>2</div>
                                                            <div style="font-size: 12px;">Top</div>
                                                        </td>
                                                        <td
                                                            style="padding: 12px 8px; text-align: center; border: none; position: relative;">
                                                            <div style="color: #81d3f8; font-size: 13px;">科教文卫</div>
                                                            <div style="color: white; font-size: 12px;">213241 件</div>
                                                            <span
                                                                style="position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: white;">→</span>
                                                        </td>
                                                        <td
                                                            style="padding: 12px 8px; text-align: center; border: none; position: relative;">
                                                            <div style="color: white; font-size: 13px;">TOP1</div>
                                                            <div style="color: white; font-size: 12px;">类型A</div>
                                                            <div style="color: white; font-size: 11px;">诉求量:23456</div>
                                                            <span
                                                                style="position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: white;">→</span>
                                                        </td>
                                                        <td
                                                            style="padding: 12px 8px; text-align: center; border: none; position: relative;">
                                                            <div style="color: white; font-size: 13px;">TOP2</div>
                                                            <div style="color: white; font-size: 12px;">类型B</div>
                                                            <div style="color: white; font-size: 11px;">诉求量:23456</div>
                                                            <span
                                                                style="position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: white;">→</span>
                                                        </td>
                                                        <td
                                                            style="padding: 12px 8px; text-align: center; border: none; position: relative;">
                                                            <div style="color: white; font-size: 13px;">TOP3</div>
                                                            <div style="color: white; font-size: 12px;">类型C</div>
                                                            <div style="color: white; font-size: 11px;">诉求量:23456</div>
                                                            <span
                                                                style="position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: white;">→</span>
                                                        </td>
                                                        <td
                                                            style="padding: 12px 8px; text-align: center; border: none;">
                                                            <div style="color: white; font-size: 13px;">TOP4</div>
                                                            <div style="color: white; font-size: 12px;">类型D</div>
                                                            <div style="color: white; font-size: 11px;">诉求量:23456</div>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td
                                                            style="padding: 12px 8px; text-align: center; background: #073576; color: white; border: none;">
                                                            <div>3</div>
                                                            <div style="font-size: 12px;">Top</div>
                                                        </td>
                                                        <td
                                                            style="padding: 12px 8px; text-align: center; border: none; position: relative;">
                                                            <div style="color: #81d3f8; font-size: 13px;">民生保障</div>
                                                            <div style="color: white; font-size: 12px;">213241 件</div>
                                                            <span
                                                                style="position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: white;">→</span>
                                                        </td>
                                                        <td
                                                            style="padding: 12px 8px; text-align: center; border: none; position: relative;">
                                                            <div style="color: white; font-size: 13px;">TOP1</div>
                                                            <div style="color: white; font-size: 12px;">类型A</div>
                                                            <div style="color: white; font-size: 11px;">诉求量:23456</div>
                                                            <span
                                                                style="position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: white;">→</span>
                                                        </td>
                                                        <td
                                                            style="padding: 12px 8px; text-align: center; border: none; position: relative;">
                                                            <div style="color: white; font-size: 13px;">TOP2</div>
                                                            <div style="color: white; font-size: 12px;">类型B</div>
                                                            <div style="color: white; font-size: 11px;">诉求量:23456</div>
                                                            <span
                                                                style="position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: white;">→</span>
                                                        </td>
                                                        <td
                                                            style="padding: 12px 8px; text-align: center; border: none; position: relative;">
                                                            <div style="color: white; font-size: 13px;">TOP3</div>
                                                            <div style="color: white; font-size: 12px;">类型C</div>
                                                            <div style="color: white; font-size: 11px;">诉求量:23456</div>
                                                            <span
                                                                style="position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: white;">→</span>
                                                        </td>
                                                        <td
                                                            style="padding: 12px 8px; text-align: center; border: none;">
                                                            <div style="color: white; font-size: 13px;">TOP4</div>
                                                            <div style="color: white; font-size: 12px;">类型D</div>
                                                            <div style="color: white; font-size: 11px;">诉求量:23456</div>
                                                        </td>
                                                    </tr>
                                                    <tr style="background: rgba(255, 255, 255, 0.05);">

                                                        <td
                                                            style="padding: 12px 8px; text-align: center; background: #073576; color: white; border: none;">
                                                            <div>4</div>
                                                            <div style="font-size: 12px;">Top</div>
                                                        </td>
                                                        <td
                                                            style="padding: 12px 8px; text-align: center; border: none; position: relative;">
                                                            <div style="color: #81d3f8; font-size: 13px;">行业监查</div>
                                                            <div style="color: white; font-size: 12px;">213241 件</div>
                                                            <span
                                                                style="position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: white;">→</span>
                                                        </td>
                                                        <td
                                                            style="padding: 12px 8px; text-align: center; border: none; position: relative;">
                                                            <div style="color: white; font-size: 13px;">TOP1</div>
                                                            <div style="color: white; font-size: 12px;">类型A</div>
                                                            <div style="color: white; font-size: 11px;">诉求量:23456</div>
                                                            <span
                                                                style="position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: white;">→</span>
                                                        </td>
                                                        <td
                                                            style="padding: 12px 8px; text-align: center; border: none; position: relative;">
                                                            <div style="color: white; font-size: 13px;">TOP2</div>
                                                            <div style="color: white; font-size: 12px;">类型B</div>
                                                            <div style="color: white; font-size: 11px;">诉求量:23456</div>
                                                            <span
                                                                style="position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: white;">→</span>
                                                        </td>
                                                        <td
                                                            style="padding: 12px 8px; text-align: center; border: none; position: relative;">
                                                            <div style="color: white; font-size: 13px;">TOP3</div>
                                                            <div style="color: white; font-size: 12px;">类型C</div>
                                                            <div style="color: white; font-size: 11px;">诉求量:23456</div>
                                                            <span
                                                                style="position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: white;">→</span>
                                                        </td>
                                                        <td
                                                            style="padding: 12px 8px; text-align: center; border: none;">
                                                            <div style="color: white; font-size: 13px;">TOP4</div>
                                                            <div style="color: white; font-size: 12px;">类型D</div>
                                                            <div style="color: white; font-size: 11px;">诉求量:23456</div>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td
                                                            style="padding: 12px 8px; text-align: center; background: #073576; color: white; border: none;">
                                                            <div>5</div>
                                                            <div style="font-size: 12px;">Top</div>
                                                        </td>
                                                        <td
                                                            style="padding: 12px 8px; text-align: center; border: none; position: relative;">
                                                            <div style="color: #81d3f8; font-size: 13px;">经济综合</div>
                                                            <div style="color: white; font-size: 12px;">213241 件</div>
                                                            <span
                                                                style="position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: white;">→</span>
                                                        </td>
                                                        <td
                                                            style="padding: 12px 8px; text-align: center; border: none; position: relative;">
                                                            <div style="color: white; font-size: 13px;">TOP1</div>
                                                            <div style="color: white; font-size: 12px;">类型A</div>
                                                            <div style="color: white; font-size: 11px;">诉求量:23456</div>
                                                            <span
                                                                style="position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: white;">→</span>
                                                        </td>
                                                        <td
                                                            style="padding: 12px 8px; text-align: center; border: none; position: relative;">
                                                            <div style="color: white; font-size: 13px;">TOP2</div>
                                                            <div style="color: white; font-size: 12px;">类型B</div>
                                                            <div style="color: white; font-size: 11px;">诉求量:23456</div>
                                                            <span
                                                                style="position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: white;">→</span>
                                                        </td>
                                                        <td
                                                            style="padding: 12px 8px; text-align: center; border: none; position: relative;">
                                                            <div style="color: white; font-size: 13px;">TOP3</div>
                                                            <div style="color: white; font-size: 12px;">类型C</div>
                                                            <div style="color: white; font-size: 11px;">诉求量:23456</div>
                                                            <span
                                                                style="position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: white;">→</span>
                                                        </td>
                                                        <td
                                                            style="padding: 12px 8px; text-align: center; border: none;">
                                                            <div style="color: white; font-size: 13px;">TOP4</div>
                                                            <div style="color: white; font-size: 12px;">类型D</div>
                                                            <div style="color: white; font-size: 11px;">诉求量:23456</div>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </dv-border-box-12>
                            </div>

                        </div>



                        <div class="right">

                            <div class="right-1">
                                <dv-border-box-12 style="height: 230px;">
                                    <div style="padding: 10px 20px;border: 1px solid #1e88e5;">诉求月度趋势分析</div>
                                    <div id="biao5" style="width: 100%; height: 90%;"></div>
                                </dv-border-box-12>
                            </div>

                            <div class="right-2">
                                <dv-border-box-12 style="height: 230px;">
                                    <div style="padding: 10px 20px;border: 1px solid #1e88e5;">诉求月度趋势分析</div>
                                    <div id="biao6" style="width: 100%; height: 90%;"></div>
                                </dv-border-box-12>
                            </div>

                            <div class="right-3">
                                <dv-border-box-12 style="height: 240px;">
                                    <div style="padding: 10px 20px;border: 1px solid #1e88e5;">本月诉求热点部门</div>
                                    <div id="biao7" style="width: 100%; height: 90%;"></div>
                                </dv-border-box-12>
                            </div>

                            <div class="right-4">
                                <dv-border-box-12 style="height: 240px;">
                                    <div style="padding: 10px 20px;border: 1px solid #1e88e5;">年度诉求热点部门排名</div>
                                    <div id="biao8" style="width: 100%; height: 100%;"></div>
                                </dv-border-box-12>
                            </div>

                        </div>

                    </div>



                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import {
    defineComponent,
    ref,
    reactive,
    onMounted,
    onUnmounted,
} from 'vue'
import * as echarts from 'echarts';
import { formatTime } from '@/utils/index'
import { WEEK } from '@/constant/index'
import useDraw from '@/utils/useDraw'
import { title, subtitle, moduleInfo } from '@/constant/index'
import CenterLeft1 from '../centerLeft1/index.vue'
import CenterLeft2 from '../centerLeft2/index.vue'
import Center from '../center/index.vue'
import CenterRight1 from '../centerRight1/index.vue'
import CenterRight2 from '../centerRight2/index.vue'
import BottomLeft from '../bottomLeft/index.vue'
import BottomRight from '../bottomRight/index.vue'
import { useRouter } from 'vue-router'

export default defineComponent({
    data() {
        return {
            config: {
                points: [
                    {
                        name: '郑州',
                        coordinate: [0.48, 0.35],
                        itemStyle: {
                            color: '#000000' 
                        },
                        halo: {
                            show: true, 
                            color: '#00ff00', 
                            radius: 15, 
                            duration: 2000 
                        },
                    },
                    {
                        name: '新乡',
                        coordinate: [0.52, 0.23],
                        itemStyle: {
                            color: '#000000' 
                        },
                        halo: {
                            show: true, 
                            color: '#00ff00', 
                            radius: 15, 
                            duration: 2000 
                        },
                    },
                    {
                        name: '焦作',
                        coordinate: [0.43, 0.29],
                        itemStyle: {
                            color: '#000000' 
                        },
                        halo: {
                            show: true, 
                            color: '#00ff00', 
                            radius: 15, 
                            duration: 2000 
                        },
                    },
                    {
                        name: '开封',
                        coordinate: [0.59, 0.35],
                        itemStyle: {
                            color: '#000000' 
                        },
                        halo: {
                            show: true, 
                            color: '#00ff00', 
                            radius: 15, 
                            duration: 2000 
                        },
                    },
                    {
                        name: '许昌',
                        coordinate: [0.53, 0.47],
                        itemStyle: {
                            color: '#000000' 
                        },
                        halo: {
                            show: true, 
                            color: '#00ff00', 
                            radius: 15, 
                            duration: 2000 
                        },
                    },
                    {
                        name: '平顶山',
                        coordinate: [0.45, 0.54],
                        itemStyle: {
                            color: '#000000' 
                        },
                        halo: {
                            show: true, 
                            color: '#00ff00', 
                            radius: 15, 
                            duration: 2000 
                        },
                    },
                    {
                        name: '洛阳',
                        coordinate: [0.36, 0.38],
                        itemStyle: {
                            color: '#000000' 
                        },
                        halo: {
                            show: true, 
                            color: '#00ff00', 
                            radius: 15, 
                            duration: 2000 
                        },
                    },
                    {
                        name: '周口',
                        coordinate: [0.62, 0.55],
                        itemStyle: {
                            color: '#000000' 
                        },
                        halo: {
                            show: true, 
                            color: '#00ff00', 
                            radius: 15, 
                            duration: 2000 
                        },
                    },
                    {
                        name: '漯河',
                        coordinate: [0.56, 0.56],
                        itemStyle: {
                            color: '#000000' 
                        },
                        halo: {
                            show: true, 
                            color: '#00ff00', 
                            radius: 15, 
                            duration: 2000 
                        },
                    },
                    {
                        name: '南阳',
                        coordinate: [0.37, 0.66],
                        itemStyle: {
                            color: '#000000' 
                        },
                        halo: {
                            show: true, 
                            color: '#00ff00', 
                            radius: 15, 
                            duration: 2000 
                        },
                    },
                    {
                        name: '信阳',
                        coordinate: [0.55, 0.81],
                        itemStyle: {
                            color: '#000000' 
                        },
                        halo: {
                            show: true, 
                            color: '#00ff00', 
                            radius: 15, 
                            duration: 2000 
                        },
                    },
                    {
                        name: '驻马店',
                        coordinate: [0.55, 0.67],
                        itemStyle: {
                            color: '#000000' 
                        },
                        halo: {
                            show: true, 
                            color: '#00ff00', 
                            radius: 15, 
                            duration: 2000 
                        },
                    },
                    {
                        name: '济源',
                        coordinate: [0.37, 0.29],
                        itemStyle: {
                            color: '#000000' 
                        },
                        halo: {
                            show: true, 
                            color: '#00ff00', 
                            radius: 15, 
                            duration: 2000 
                        },
                    },
                    {
                        name: '三门峡',
                        coordinate: [0.20, 0.36],
                        itemStyle: {
                            color: '#000000' 
                        },
                        halo: {
                            show: true, 
                            color: '#00ff00', 
                            radius: 15, 
                            duration: 2000 
                        },
                    },
                    {
                        name: '商丘',
                        coordinate: [0.76, 0.41],
                        itemStyle: {
                            color: '#000000' 
                        },
                        halo: {
                            show: true, 
                            color: '#00ff00', 
                            radius: 15, 
                            duration: 2000 
                        },
                    },
                    {
                        name: '鹤壁',
                        coordinate: [0.59, 0.18],
                        itemStyle: {
                            color: '#000000' 
                        },
                        halo: {
                            show: true, 
                            color: '#00ff00', 
                            radius: 15, 
                            duration: 2000 
                        },
                    },
                    {
                        name: '濮阳',
                        coordinate: [0.68, 0.17],
                        itemStyle: {
                            color: '#000000' 
                        },
                        halo: {
                            show: true, 
                            color: '#00ff00', 
                            radius: 15, 
                            duration: 2000 
                        },
                    },
                    {
                        name: '安阳',
                        coordinate: [0.59, 0.10],
                        itemStyle: {
                            color: '#000000' 
                        },
                        halo: {
                            show: true, 
                            color: '#00ff00', 
                            radius: 15, 
                            duration: 2000 
                        },
                    }
                ],
                lines: [
                    {
                        source: '新乡',
                        target: '郑州'
                    },
                    {
                        source: '焦作',
                        target: '郑州'
                    },
                    {
                        source: '开封',
                        target: '郑州'
                    },
                    {
                        source: '周口',
                        target: '郑州',
                        color: '#fb7293',
                        width: 2
                    },
                    {
                        source: '南阳',
                        target: '郑州',
                        color: '#fb7293',
                        width: 2
                    },
                    {
                        source: '济源',
                        target: '郑州'
                    },
                    {
                        source: '三门峡',
                        target: '郑州'
                    },
                    {
                        source: '商丘',
                        target: '郑州'
                    },
                    {
                        source: '鹤壁',
                        target: '郑州'
                    },
                    {
                        source: '濮阳',
                        target: '郑州'
                    },
                    {
                        source: '安阳',
                        target: '郑州'
                    },
                    {
                        source: '许昌',
                        target: '南阳',
                        color: '#37a2da'
                    },
                    {
                        source: '平顶山',
                        target: '南阳',
                        color: '#37a2da'
                    },
                    {
                        source: '洛阳',
                        target: '南阳',
                        color: '#37a2da'
                    },
                    {
                        source: '驻马店',
                        target: '周口',
                        color: '#8378ea'
                    },
                    {
                        source: '信阳',
                        target: '周口',
                        color: '#8378ea'
                    },
                    {
                        source: '漯河',
                        target: '周口',
                        color: '#8378ea'
                    }
                ],
                icon: {
                    show: true,
                    src: 'https://cdn8.axureshop.com/demo2025/2328232/images/05__%E6%94%BF%E5%8A%A1%E8%B0%83%E8%A7%A3%E5%88%86%E6%9E%90%E5%A4%A7%E5%B1%8F/u2920.png'
                },
                handle: {
                    show: true,
                },
                text: {
                    show: true,
                },
                // k: 0.5,
                bgImgSrc: 'https://cdn8.axureshop.com/demo2025/2328232/images/05__%E6%94%BF%E5%8A%A1%E8%B0%83%E8%A7%A3%E5%88%86%E6%9E%90%E5%A4%A7%E5%B1%8F/u2920.png'
            }
        }
    },
    components: {
        CenterLeft1,
        CenterLeft2,
        Center,
        CenterRight1,
        CenterRight2,
        BottomLeft,
        BottomRight,
    },
    setup() {
        // * tab切换 颜色背景改变
        const lastChar = location.href.substr(location.href.length - 1)
        const tabColor = ref(lastChar)
        // * 颜色
        const decorationColors = ['#568aea', '#000000']
        // * 加载标识
        const loading = ref<boolean>(true)
        // * 时间内容
        const timeInfo = reactive({
            setInterval: 0,
            dateDay: '',
            dateYear: '',
            dateWeek: ''
        })

        const router = useRouter()
        //路由跳转
        const shou = () => {
            router.push("/")
            console.log("跳转成功");
        }

        const tiao = () => {
            router.push("/wzh2")
            console.log("跳转成功");
        }

        const tiao2 = () => {
            router.push("/wzh3")
        }

        const tiao3 = () => {
            router.push("/sjk")
        }

        const tiao4 = () => {
            router.push("/sjk1")
        }
        const tiao5 = () => {
            router.push("/sjk2")
        }
        const tiao6 = () => {
            router.push("/mhr1")
        }
        const tiao7 = () => {
            router.push("/mhr2")
        }
        const tiao8 = () => {
            router.push("/mhr3")
        }
        const tiao9 = () => {
            router.push("/st1")
        }
        const tiao10 = () => {
            router.push("/st2")
        }
        const tiao11 = () => {
            router.push("/st3")
        }

        // 第四个图的tab切换
        const activeTab = ref(0)
        const tabOptions = ['效率最高', '效率最低', '满意度']

        const handleTabClick = (index: number) => {
            activeTab.value = index
        }

        // left-5的独立tab切换
        const activeTab2 = ref(0)
        const handleTabClick2 = (index: number) => {
            activeTab2.value = index
        }

        //第一个
        const initChart = () => {
            var chartDom = document.getElementById('biao1');
            var myChart = echarts.init(chartDom);
            var option = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}: {d}%'
                },
                legend: {
                    bottom: 10,
                    left: 'center',
                    textStyle: {
                        color: '#ffffff'
                    },


                },
                series: [
                    {
                        name: '诉求来源',
                        type: 'pie',
                        radius: ['60%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderWidth: 2
                        },
                        label: {
                            show: true,
                            position: 'center',
                            color: '#ffffff',
                            fontSize: 16,
                            formatter: "诉求来源"
                        },
                        emphasis: {
                            label: {
                                // show: true,
                                // fontSize: 40,
                                // fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: 15, name: '电话', itemStyle: { color: '#1ED9C4' } },
                            { value: 25, name: '网站', itemStyle: { color: '#3329D9' } },
                            { value: 15, name: 'APP', itemStyle: { color: '#7C2CE7' } },
                            { value: 45, name: '其他', itemStyle: { color: '#4380FD' } }
                        ],

                    }
                ]
            };

            option && myChart.setOption(option);

        }
        //第二个
        const initTu2 = () => {
            var chartDom = document.getElementById('biao2');
            var myChart = echarts.init(chartDom);
            var option = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}: {d}%'
                },
                legend: {
                    bottom: 10,
                    left: 'center',
                    textStyle: {
                        color: '#ffffff'
                    },
                    itemWidth: 20,      // 图例图标宽度
                },
                series: [
                    {
                        name: '诉求类别',
                        type: 'pie',
                        radius: ['60%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderWidth: 2
                        },
                        label: {
                            show: true,
                            position: 'center',
                            color: '#ffffff',
                            fontSize: 16,
                            formatter: "诉求类别"
                        },
                        emphasis: {
                            label: {
                                // show: true,
                                // fontSize: 40,
                                // fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: 15, name: '咨询', itemStyle: { color: '#1ED9C4' } },
                            { value: 25, name: '诉求', itemStyle: { color: '#3329D9' } },
                            { value: 5, name: '表扬', itemStyle: { color: '#A40259' } },
                            { value: 15, name: '求助', itemStyle: { color: '#7C2CE7' } },
                            { value: 40, name: '建议', itemStyle: { color: '#4380FD' } }
                        ],
                        // color: [
                        //     '#7C2CE7',
                        //     '#4380FD',
                        //     '#A40259',
                        //     '#3329D9',
                        //     '#1ED9C4',
                        // ]
                    }
                ]
            };

            option && myChart.setOption(option);

        }

        //第三个
        const initTu3 = () => {
            // 初始化图表
            const hotDeptChart = echarts.init(document.getElementById('biao3'));
            // 配置项
            const option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    formatter: '{b}<br/>{c} 件'
                },
                grid: {
                    left: '8%',
                    right: '8%',
                    bottom: '20%',
                    top: '15%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: ['卫计委', '交通委', '质监委', '统计局', '人社局', '食药监'],
                    axisLine: {
                        lineStyle: {
                            color: '#4c596c'
                        }
                    },
                    axisLabel: {
                        color: '#e6e6e6',
                        fontSize: 12,
                        interval: 0
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '诉求量',
                    nameTextStyle: {
                        color: '#e6e6e6',
                        fontSize: 12
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#4c596c'
                        }
                    },
                    axisLabel: {
                        color: '#e6e6e6',
                        fontSize: 12
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(255, 255, 255, 0.1)'
                        }
                    }
                },
                series: [
                    {
                        data: [150, 120, 100, 70, 50, 20],
                        type: 'bar',
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    { offset: 0, color: '#00ccff' },
                                    { offset: 1, color: '#9966ff' }
                                ]
                            ),
                            borderRadius: [0, 0, 0, 0]
                        },
                        barWidth: '40%',
                        label: {
                            show: true,
                            position: 'top',
                            color: '#fff',
                            fontSize: 12,
                            formatter: '{c}'
                        }
                    }
                ]
            };
            // 渲染图表
            hotDeptChart.setOption(option);
            // 窗口 resize 适配
            window.addEventListener('resize', () => {
                hotDeptChart.resize();
            });
        }

        //第四个
        const initTu4 = () => {
            console.log('initTu4开始执行');
            var chartDom = document.getElementById('biao4');

            // 确保图表容器有明确的宽高
            if (chartDom) {
                chartDom.style.width = '480px'; // 使用具体像素值
                chartDom.style.height = '160px';
                chartDom.style.backgroundColor = 'rgba(0, 0, 0, 0.2)'; // 添加背景色以便调试
                console.log('biao4容器存在，宽高设置为:', chartDom.style.width, chartDom.style.height);
            } else {
                console.error('biao4容器不存在!');
                return;
            }

            try {
                var myChart = echarts.init(chartDom);
                console.log('ECharts实例创建成功');

                // 使用更简单的配置，确保基本功能正常
                var option = {
                    backgroundColor: 'transparent',
                    tooltip: {
                        trigger: 'axis'
                    },
                    grid: {
                        left: '5%',
                        right: '5%',
                        bottom: '5%',
                        top: '10%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: ['A', 'B', 'C', 'D', 'E', 'F'],
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#e6e6e6'
                            }
                        },
                        axisLabel: {
                            color: '#e6e6e6'
                        }
                    },
                    yAxis: {
                        type: 'value',
                        min: 0,
                        max: 100,
                        axisLabel: {
                            color: '#e6e6e6',
                            formatter: '{value}%'
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#e6e6e6'
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                color: 'rgba(255, 255, 255, 0.1)'
                            }
                        }
                    },
                    series: [
                        {
                            data: [25, 30, 50, 65, 80, 95],
                            type: 'bar',
                            itemStyle: {
                                // 使用纯色替代渐变色，避免可能的兼容性问题
                                color: '#4380FD'
                            },
                            barWidth: '30%',
                            label: {
                                show: true,
                                position: 'top',
                                color: '#fff',
                                formatter: '{c}%'
                            }
                        }
                    ]
                };

                myChart.setOption(option);
                console.log('图表配置设置成功');

                // 窗口 resize 适配 - 使用箭头函数以便在组件卸载时可以正确清理
                const resizeHandler = () => {
                    if (myChart && !myChart.isDisposed()) {
                        myChart.resize();
                    }
                };
                window.addEventListener('resize', resizeHandler);

                // 在组件卸载时清理监听器和图表实例
                onUnmounted(() => {
                    if (myChart && !myChart.isDisposed()) {
                        myChart.dispose();
                    }
                    window.removeEventListener('resize', resizeHandler);
                });

            } catch (error) {
                console.error('图表初始化失败:', error);
            }
        }


        //第五个
        const initTu5 = () => {
            var chartDom = document.getElementById('biao5');
            if (!chartDom) return;

            var myChart = echarts.init(chartDom);

            var option = {
                backgroundColor: 'transparent',
                tooltip: {
                    trigger: 'axis',
                    formatter: '{b}月<br/>诉求量: {c}'
                },
                grid: {
                    left: '10%',
                    right: '5%',
                    bottom: '15%',
                    top: '15%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
                    axisLine: {
                        lineStyle: {
                            color: '#4c596c'
                        }
                    },
                    axisLabel: {
                        color: '#e6e6e6',
                        fontSize: 8,
                        formatter: '{value}月'
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '诉求量',
                    nameTextStyle: {
                        color: '#e6e6e6',
                        fontSize: 8
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#4c596c'
                        }
                    },
                    axisLabel: {
                        color: '#e6e6e6',
                        fontSize: 8
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(255, 255, 255, 0.1)'
                        }
                    },
                    max: 150
                },
                series: [
                    {
                        data: [30, 80, 60, 40, 50, 90, 147, 95, 55, 70, 100, 40],
                        type: 'line',
                        smooth: true,
                        symbol: 'circle',
                        symbolSize: 3,
                        lineStyle: {
                            color: '#4380FD',
                            width: 1
                        },
                        itemStyle: {
                            color: '#fff',
                            borderColor: '#4380FD',
                            borderWidth: 1
                        },
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    { offset: 0, color: 'rgba(67, 128, 253, 0.6)' },
                                    { offset: 1, color: 'rgba(67, 128, 253, 0.1)' }
                                ]
                            )
                        },
                        markPoint: {
                            data: [
                                {
                                    coord: [6, 147],
                                    name: '147',
                                    symbol: 'circle',
                                    symbolSize: 0,
                                    label: {
                                        show: true,
                                        color: '#fff',
                                        fontSize: 10,
                                        fontWeight: 'bold'
                                    }
                                }
                            ]
                        }
                    }
                ]
            };

            option && myChart.setOption(option);

            // 窗口 resize 适配
            const resizeHandler = () => {
                if (myChart && !myChart.isDisposed()) {
                    myChart.resize();
                }
            };
            window.addEventListener('resize', resizeHandler);

            // 在组件卸载时清理监听器和图表实例
            onUnmounted(() => {
                if (myChart && !myChart.isDisposed()) {
                    myChart.dispose();
                }
                window.removeEventListener('resize', resizeHandler);
            });
        }

        //第六个
        const initTu6 = () => {
            var chartDom = document.getElementById('biao6');
            if (!chartDom) return;
            
            var myChart = echarts.init(chartDom);
            
            var option = {
                backgroundColor: 'transparent',
                tooltip: {
                    trigger: 'axis',
                    formatter: '{b}年<br/>诉求量: {c}'
                },
                grid: {
                    left: '10%',
                    right: '5%',
                    bottom: '15%',
                    top: '15%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: ['2019', '2020', '2021', '2022', '2023', '2024'],
                    axisLine: {
                        lineStyle: {
                            color: '#4c596c'
                        }
                    },
                    axisLabel: {
                        color: '#e6e6e6',
                        fontSize: 8
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '诉求量',
                    nameTextStyle: {
                        color: '#e6e6e6',
                        fontSize: 8
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#4c596c'
                        }
                    },
                    axisLabel: {
                        color: '#e6e6e6',
                        fontSize: 8
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(255, 255, 255, 0.1)'
                        }
                    },
                    max: 150
                },
                series: [
                    {
                        data: [25, 120, 45, 130, 26, 110],
                        type: 'line',
                        smooth: true,
                        symbol: 'circle',
                        symbolSize: 3,
                        lineStyle: {
                            color: '#4380FD',
                            width: 1
                        },
                        itemStyle: {
                            color: '#fff',
                            borderColor: '#4380FD',
                            borderWidth: 1
                        },
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    { offset: 0, color: 'rgba(67, 128, 253, 0.6)' },
                                    { offset: 1, color: 'rgba(67, 128, 253, 0.1)' }
                                ]
                            )
                        },
                        markPoint: {
                            data: [
                                {
                                    coord: [4, 26],
                                    name: '26',
                                    symbol: 'circle',
                                    symbolSize: 0,
                                    label: {
                                        show: true,
                                        color: '#fff',
                                        fontSize: 10,
                                        fontWeight: 'bold',
                                        backgroundColor: 'rgba(30, 136, 229, 0.8)',
                                        padding: [2, 6],
                                        borderRadius: 2
                                    }
                                }
                            ]
                        }
                    }
                ]
            };
            
            option && myChart.setOption(option);
            
            // 窗口 resize 适配
            const resizeHandler = () => {
                if (myChart && !myChart.isDisposed()) {
                    myChart.resize();
                }
            };
            window.addEventListener('resize', resizeHandler);
            
            // 在组件卸载时清理监听器和图表实例
            onUnmounted(() => {
                if (myChart && !myChart.isDisposed()) {
                    myChart.dispose();
                }
                window.removeEventListener('resize', resizeHandler);
            });
        }

        const initTu7 = () => {
            var chartDom = document.getElementById('biao7');
            if (!chartDom) return;
            
            var myChart = echarts.init(chartDom);
            
            var option = {
                backgroundColor: 'transparent',
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['未解决', '已解决'],
                    textStyle: {
                        color: '#e6e6e6',
                        fontSize: 8
                    },
                    top: '5%'
                },
                grid: {
                    left: '10%',
                    right: '5%',
                    bottom: '15%',
                    top: '20%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: ['卫计委', '交通委', '质监局', '统计局', '人社局', '食药监'],
                    axisLine: {
                        lineStyle: {
                            color: '#4c596c'
                        }
                    },
                    axisLabel: {
                        color: '#e6e6e6',
                        fontSize: 8
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '诉求量',
                    nameTextStyle: {
                        color: '#e6e6e6',
                        fontSize: 8
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#4c596c'
                        }
                    },
                    axisLabel: {
                        color: '#e6e6e6',
                        fontSize: 8
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(255, 255, 255, 0.1)'
                        }
                    },
                    max: 200
                },
                series: [
                    {
                        name: '未解决',
                        type: 'bar',
                        stack: 'total',
                        barWidth: 10,
                        emphasis: {
                            focus: 'series'
                        },
                        data: [56, 60, 70, 40, 30, 20],
                        itemStyle: {
                            color: '#1e88e5'
                        }
                    },
                    {
                        name: '已解决',
                        type: 'bar',
                        stack: 'total',
                        emphasis: {
                            focus: 'series'
                        },
                        data: [130, 80, 80, 40, 40, 10],
                        itemStyle: {
                            color: function(params) {
                                // 绿色渐变效果
                                var colorList = [
                                    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        { offset: 0, color: '#8dd1e1' },
                                        { offset: 1, color: '#00a0e9' }
                                    ]),
                                    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        { offset: 0, color: '#8dd1e1' },
                                        { offset: 1, color: '#00a0e9' }
                                    ]),
                                    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        { offset: 0, color: '#8dd1e1' },
                                        { offset: 1, color: '#00a0e9' }
                                    ]),
                                    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        { offset: 0, color: '#8dd1e1' },
                                        { offset: 1, color: '#00a0e9' }
                                    ]),
                                    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        { offset: 0, color: '#8dd1e1' },
                                        { offset: 1, color: '#00a0e9' }
                                    ]),
                                    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        { offset: 0, color: '#8dd1e1' },
                                        { offset: 1, color: '#00a0e9' }
                                    ])
                                ];
                                return colorList[params.dataIndex];
                            }
                        }
                    }
                ]
            };
            
            option && myChart.setOption(option);
            
            // 窗口 resize 适配
            const resizeHandler = () => {
                if (myChart && !myChart.isDisposed()) {
                    myChart.resize();
                }
            };
            window.addEventListener('resize', resizeHandler);
            
            // 在组件卸载时清理监听器和图表实例
            onUnmounted(() => {
                if (myChart && !myChart.isDisposed()) {
                    myChart.dispose();
                }
                window.removeEventListener('resize', resizeHandler);
            });
        }


   // 第八个 - 词云图实现
        const initTu8 = () => {
            var chartDom = document.getElementById('biao8');
            if (!chartDom) return;
            
            // 清空容器
            chartDom.innerHTML = '';
            
            // 设置容器样式
            chartDom.style.display = 'flex';
            chartDom.style.flexDirection = 'column';
            chartDom.style.height = '100%';
            chartDom.style.padding = '10px';
            chartDom.style.boxSizing = 'border-box';
            
            // 创建三行布局容器
            const row1 = document.createElement('div');
            row1.style.display = 'flex';
            row1.style.justifyContent = 'space-around';
            row1.style.marginBottom = '10px';
            row1.style.alignItems = 'center';
            
            const row2 = document.createElement('div');
            row2.style.display = 'flex';
            row2.style.justifyContent = 'space-around';
            row2.style.marginBottom = '10px';
            row2.style.alignItems = 'center';
            
            const row3 = document.createElement('div');
            row3.style.display = 'flex';
            row3.style.justifyContent = 'space-around';
            row3.style.alignItems = 'center';
            
            chartDom.appendChild(row1);
            chartDom.appendChild(row2);
            chartDom.appendChild(row3);
            
            // 创建词云标签的函数
            const createWordTag = (text, fontSize, color) => {
                const span = document.createElement('span');
                span.textContent = text;
                span.style.fontSize = fontSize + 'px';
                span.style.color = color;
                span.style.fontWeight = 'bold';
                span.style.margin = '5px';
                span.style.transition = 'all 0.3s ease';
                span.style.cursor = 'pointer';
                
                // 悬停效果
                span.addEventListener('mouseenter', () => {
                    span.style.transform = 'scale(1.1)';
                    span.style.textShadow = '0 0 10px ' + color;
                });
                
                span.addEventListener('mouseleave', () => {
                    span.style.transform = 'scale(1)';
                    span.style.textShadow = 'none';
                });
                
                return span;
            };
            
            // 第一行 - 严格按照图片还原
            row1.appendChild(createWordTag('财政', 16, '#03a9f4'));
            row1.appendChild(createWordTag('产权争议', 16, '#009688'));
            row1.appendChild(createWordTag('技术保护', 28, '#2196f3'));
            row1.appendChild(createWordTag('产权争议', 16, '#009688'));
            
            // 第二行 - 严格按照图片还原
            row2.appendChild(createWordTag('环境', 16, '#1976d2'));
            row2.appendChild(createWordTag('教育', 18, '#3f51b5'));
            row2.appendChild(createWordTag('综合服务', 36, '#9c27b0'));
            row2.appendChild(createWordTag('税收', 16, '#ff9800'));
            
            // 第三行 - 严格按照图片还原
            row3.appendChild(createWordTag('交通', 16, '#673ab7'));
            row3.appendChild(createWordTag('就业', 16, '#ff5722'));
            row3.appendChild(createWordTag('经济管理', 24, '#607d8b'));
            row3.appendChild(createWordTag('环保', 16, '#795548'));
            
            // 窗口 resize 适配
            const resizeHandler = () => {
                // 调整容器高度
                if (chartDom.parentElement) {
                    chartDom.style.height = chartDom.parentElement.clientHeight - 20 + 'px';
                }
            };
            window.addEventListener('resize', resizeHandler);
            
            // 初始调整
            resizeHandler();
            
            // 在组件卸载时清理监听器
            onUnmounted(() => {
                window.removeEventListener('resize', resizeHandler);
            });
        }

        // * 适配处理
        const { appRef, calcRate, windowDraw, unWindowDraw } = useDraw()
        // 生命周期
        onMounted(() => {
            cancelLoading()
            handleTime()
            // todo 屏幕适应
            windowDraw()
            calcRate()
            setTimeout(() => {
                initChart()
                initTu2()
                initTu3()
                initTu4()
                initTu5()
                initTu6()
                initTu7()
                initTu8()
            }, 500)
        })

        onUnmounted(() => {
            unWindowDraw()
            clearInterval(timeInfo.setInterval)
        })

        //点击颜色切换  路由跳转
        const tab = (index) => {
            // console.log(index)
            tabColor.value = index
            router.push(`/tab${index}`)
        }

     

        // methods
        // todo 处理 loading 展示
        const cancelLoading = () => {
            setTimeout(() => {
                loading.value = false
            }, 500)
        }

        // todo 处理时间监听
        const handleTime = () => {
            timeInfo.setInterval = setInterval(() => {
                const date = new Date()
                timeInfo.dateDay = formatTime(date, 'HH: mm: ss')
                timeInfo.dateYear = formatTime(date, 'yyyy-MM-dd')
                timeInfo.dateWeek = WEEK[date.getDay()]
            }, 1000)
        }

        // return
        return {
            loading,
            timeInfo,
            appRef,
            title,
            subtitle,
            moduleInfo,
            tabColor,
            tab,
            tiao,
            tiao2,
            shou,
            tiao3,
            tiao4,
            tiao5,
            tiao6,
            tiao7,
            tiao8,
            tiao9,
            tiao10,
            tiao11,
            activeTab,
            tabOptions,
            handleTabClick,
            activeTab2,
            handleTabClick2
        }
    }
})
</script>

<style lang="scss" scoped>
@import '@/assets/scss/index.scss';

.content-box {
    width: 100%;
    display: flex;
    gap: 16px;
    padding: 5px;
    box-sizing: border-box;
}

.left,
.center,
.right {
    flex: 1;
    min-width: 0;
}

.left {
    width: 500px;
    // border: 1px solid #568aea;

    .left-1 {
        .flex {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            margin: 0 auto;
            height: 30%;
            width: 90%;
            // border: 1px solid red;
        }

        .dv-border-box-10 {
            width: 30%;
            height: 100%;
            text-align: center;
        }

    }

    .left-2 {
        .title2 {
            padding: 10px 15px;
            width: 75%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 60px;
            // border: 1px solid #ffffff;

            .dv-border-box-10 {
                width: 62%;
                height: 40px;
                line-height: 4px;
                text-align: center;
            }
        }

        .tu-flex {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            margin: 0 auto;
            height: 30%;
            width: 90%;
            // border: 1px solid red;

            .tu1 {
                width: 100%;
                height: 260PX;
            }

            .tu2 {
                width: 100%;
                height: 260PX;
            }

            .single-chart {
                width: 180px;
                height: 230px;
                // border: 1px solid #ffffff;
            }
        }


    }

    .left-3 {
        .biao3 {
            width: 100%;
            height: 100%;
            // border: 1px solid;
        }

        .chart-title {
            font-size: 16px;
            font-weight: bold;
            padding: 10px 20px;
            // border: 1px solid;
        }
    }


    .left-4 {
        .title4 {
            padding: 10px 15px;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 40px;

            // border: 1px solid;
            .left-title {
                font-size: 18px;
                font-weight: bold;
            }

            .right-tab {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                width: 50%;
                height: 30px;
                line-height: 30px;
                text-align: center;
                font-size: 14px;
                position: relative;

                div {
                    flex: 1;
                    cursor: pointer;
                    margin: 0 2px;
                    border-radius: 2px;
                    transition: all 0.3s ease;
                    position: relative;
                    z-index: 1;
                    border: 1px solid transparent;

                    &.active-tab {
                        color: #ffffff;
                        font-weight: bold;
                        border: 1px solid #568aea;
                        background-color: transparent;
                        transform: translateY(0);
                        z-index: 2;
                    }
                }
            }
        }

        .biao4 {
            width: 100%;
            height: 100%;
        }




    }

    .left-5 {
        .title5 {
            padding: 10px 15px;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 40px;

            //    border: 1px solid;
            .left-title {
                font-size: 18px;
                font-weight: bold;
            }

            .right-tab2 {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                width: 50%;
                height: 30px;
                line-height: 30px;
                text-align: center;
                font-size: 14px;
                position: relative;

                div {
                    flex: 1;
                    cursor: pointer;
                    margin: 0 2px;
                    border-radius: 2px;
                    transition: all 0.3s ease;
                    position: relative;
                    z-index: 1;
                    border: 1px solid transparent;

                    &.active-tab {
                        color: #ffffff;
                        font-weight: bold;
                        border: 1px solid #568aea;
                        background-color: transparent;
                        transform: translateY(0);
                        z-index: 2;
                    }
                }
            }
        }
    }
}







.center {
    // border: 1px solid white;
    width: 850px;

    .top {
        // border: 1px solid red;
    }

    .bottom {
        height: 100%;
    }
}

.right {
    // border: 1px solid red;
    width: 500px;
    height: 100%;
}
</style>
